<!DOCTYPE html>
<html>
    <!-- JavaScript层次节点练习 -->
    <head>
        <meta charset="utf-8"/>
      
    </head>
    <style>
        .div{
            font-size:50px;
        }
        .div{
            font-size: 16px;
        }
    </style>
    <body>
        
<div id="box">
    第一个div标签
    <p id="p" title="P标签">第一个p标签</p>
    <ul>
        <li>第一个li标签</li>
        <li>第二个li标签</li>
        <li>第三个li标签</li>
    </ul>
    <p>
        第二个p标签
    <span>
        第一个span标签
    </span>
    </p>
</div>
<script type="text/javaScript">
            
    var box = document.getElementById("box");
    var childs =box.childNodes;
    var child = box.children;
    console.log(childs);
    console.log(child);
   
    var childs1 =box.firstChild;
    var child1 = box.firstElementChild;
    var childs2 = box.lastChild;
    var child2 = box.lastElementChild;
    console.log(childs1);
    console.log(child1);
    console.log(childs2);
    console.log(child2);
    
    nodes =box.parentNode;
    console.log(nodes);

    var childs3 =  box.previousSibling;
    var child3 = box.previousElementSibling;
    console.log(childs3)
    console.log(child3)

    var childs4 =  box.nextSibling;
    var child4 = box.nextElementSibling;
    console.log(childs4)
    console.log(child4)

    var p = document.getElementById("p");
    var attrs = p.attributes;
    console.log("attrs");

</script>
</body>

</html>